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Hello, I’m Margaret Moser. I'm going to talk about my experiences teaching design students to code. 
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Here’s what I’ll talk about - first I'll talk about my goals. Then we’ll look at some research. Then I'll show some 
specific tools I think are helpful for beginning programmers, and discuss why. 
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Programming is the last 
mile of game design. 

Jonathan Blow 


Game designers must 
learn to program. 

Chris Hecker 


Everybody in this country 
should learn how to 
program a computer. 

Steve Jobs 
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There was this controversy, from a couple of years ago. Do designers need to code? It’s an important question. 
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But that’s not really my motivation. For me, it's personal. 
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The Dark Ages: CS Curriculum 



Semester 1 


Semester 2 
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Scheme (a Lisp variant) 
functional programming 
(handout for Unix shell) 

algorithms 
data structures 

(handouts for C++, emacs, gcc) 
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So this was the introductory CS curriculum when I started college. Where I have “handout”, I mean that they 
literally gave us a paper handout. Sometimes they also went over it briefly in class. 


They gave us powerful tools though! 
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Computers hewn from 
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the latest stone 
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And emacs. Emacs had autocomplete... if you typed a bracket or paren it would provide the other one! 

This screen shot shows menus, but we didn't have menus. So to use it, you had to know a lot of arcane key 
combinations - like even to save a file. I mean buffer. 


I did okay learning the Unix command line and emacs and I even enjoyed functional programming. But then 
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We got to data structures and algorithms in C++, and I couldn’t seem to keep up. Nobody thought that class was 
easy, but somehow they were getting traction and I wasn't I didn't get it - I got the highest score in AP Computer 
Science; the only prerequisite was the Scheme class where I’d gotten an A. 
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I remember working very late nights and spending a lot of time trying to decipher compiler error messages. I 
talked to the TA, who was a CS grad student. I would come in with code that was seriously broken, and he would 
say things like “this loop is inefficient.” 

I was so frustrated by this experience that I ended up bailing 
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But I still wanted to make stuff, and there was this new thing called the Web. I taught myself a bit of JavaScript. 


In my first job (as a tech writer) I got a chance to make web-based training. I kept going as a web developer, and I 
kept teaching myself. 
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I learned from coworkers' code. I picked up some Java. I learned about encapsulation and design patterns. I spent 
more time with the Java Date object than with search algorithms, but I could reliably solve problems and write 
clean, modular, readable code. Eventually I had a business card like this. 


But by then I wanted to make my own stuff. In particular I got interested in making games. 
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USC Games 


miraculously I got a teaching job at one of the top programs. NOW I COULD 
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USCViterbi 

Sch(K»l of Engineering 
Department of Computer Science 
GamePipe Laboratory 

+ 

USCSchool 
of Cinematic Arts 

Interactive Media & Games Division 


But what was the job actually? 

USC Games is actually four degrees (and a few minors) in two different schools. Our engineering school offers 
degrees in computer science with a concentration in games. 

Interactive Media & Games lives in the film school and focuses on design and production skills. That’s where I 
work. 
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So our philosophy is that the designers in our program should in fact learn to code. And that’s the primary 
teaching challenge I came into: teach Unity, including C# scripting, to design students. Just enough so they can 
prototype their ideas. 
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So for them, coding is a means to an end. They don't need the most powerful toolset or the cleanest code. Those 
things will come with time, if they want them. But as Mitu and others have noted here at the Summit, putting all 
that stuff in my intro class would just frustrate them. 
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They come in with a huge range of experience with code, but it's an intro course and I start at the beginning. 

So. I had a solid syllabus from Jeremy Gibson but I didn’t have lesson plans. I looked around; there weren't really 
any direct equivalents of this course. I looked over to Computer Science... 
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I’m not saying nothing changed, but it wasn't as different as I would have thought. 

But they were solving a very different problem anyway. In a CS class it’s reasonable to assume some amount of 
intrinsic motivation to work with code. My students are smart, curious, hardworking people, but they’re not there 
specifically to learn how to code. It’s a means to an end. My approach has to reflect that. 

So back to the lesson plans. How about resources from Unity? 
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They had some tutorials. After a while they even had videos. Problem solved... 
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This is just bad subtitling for gimbal lock, but they are pretty rife with jargon - they seem to have their engine 
coders do the tutorials. They’re not useless, but they're not what I needed either. 
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So, okay, there's Processing, which is a good model for what I'm after. I teach a Processing class, which we've 
recently changed to half Processing and half Unity. I can probably adapt some of that material. 


But in order to bring all of these sources together, I needed to look at the big question: 
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What makes learning to program hard? 
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In particular, what do my design students find difficult, versus your average CS major? And then naturally 
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How can I make it better? 
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I refuse to just teach them less. I really want them to be able to express themselves and feel empowered to learn 
more when they need it. 


And I guess I’m attracted to hard problems. 
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Principles 
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I’d like to preface this section saying I don't have any formal education in the pedagogy computer science. If you 
do, I would love to talk to you! You’ll see my Twitter handle at the end. 


So, when I got this job, I didn't have much teaching experience, and I started trying to educate myself. The first 
thing I needed was a framework for understanding the pedagogical problem. What are we teaching when we teach 
people how to program? 
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And what are we not teaching? 

For me it felt like there was something missing in that C++ course, but I couldn’t codify it. 
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Learning to Program: A Breakdown 

1. General orientation 

2. The notional machine 

3 . Notation 

4 . Plans and schemas 


So here’s a breakdown I liked. It’s many years old now, but it’s still cited. I tried to map this list to my experiences 
as a student and as a teacher, and it seemed to me that 


5 . Pragmatics 


Source: Benedict du Boulay, 
Some Difficulties of Learning to Program 
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We usually focus on 
these two: 



1. General orientation 

2 . The notional machine 

3. Notation 

4. Plans and schemas 

5. Pragmatics 



. 



The classes I took had focused almost exclusively on notation and schemas. 
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Notation is just syntax - where do you need braces, semicolons, etc. Schemas are various kinds of reusable 
patterns that come up in solving problems: search algorithms and collision listeners and factories. 
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But the other ones 
are important! 
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1. General orientation 

2. The notional machine 

3 . Notation 

4 . Plans and schemas 

5 . Pragmatics 



These seemed to describe what was missing from my education. 

These might seem fluffy, or like a waste of precious class time. But have you ever encountered a smart, capable 
student who nonetheless struggled with CS? It could be that they were missing some of this. 


Let’s go through these briefly. 
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General Orientation 


What is code? 

What are you doing when you write it? 
Why would you want to work with it? 
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So, starting at the beginning. These are some questions that we might address very briefly in the first class. 
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What is code? What is it like to write it? I try to convey that the act of coding is difficult because you are basically 
constructing a universe from scratch. We are not gods, so we make mistakes. Sometimes I even make them read a 
bit of semiotics. 

But orientation is also about WHO programs, and why. 
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Remember, my students don’t think of themselves as programmers. So I spend quite a while explaining my 
background to them. I emphasize that I’m a German major, that I’m self-taught. I like using code because it lets 
me express my ideas. But there are many reasons that people come to code, and many reasonable stopping 
points depending on what you want. 

I talk about soft skills and attitudes: fearlessness, patience, laziness (the good kind), plain old stubbornness. And 
most of all, asking for help. 
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The notional machine is your mental model of what the computer is doing- your ability to predict its behavior. 


We often use analogies for this: variables are boxes and so on. Or we talk about von Neumann architecture, or 
perhaps discuss stacks and heaps and registers. These things are all useful, but 
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Computers forget things a lot 



what students need to know is how to work with computers: things like why computers need variables. Yes, this is 
implicit in the architecture, but pedagogically it’s like if I said “humans have two elbows, now write Crime and 
Punishment”. 

Now let’s look at the last item, pragmatics. 
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Pragmatics is using the tools of programming: IDEs, engines, compilers. If we talk about our tools at all, we tend to 
say “this button does this, that button does that”. 
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And this is where I thought -aha! Here’s a place I can bring in my professional experience. 


As a UX designer my argument is that our tools should be better - they should help us to see and understand 
what we are doing. I am a disciple of Bret Victor in this way. 


One example is dev tools, built into every modern browser. Here it’s showing what’s called the box model, right 
next to the object you're trying to position. Exposing the model like this is extraordinarily helpful for making web 
pages. But our tools generally don’t do this. 
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Pragmatics 
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So I’m focusing on PRAGMATICS, because it's where I feel I have the most to say. 
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Errors come from the system (user + tool). 

The tool permits or perhaps encourages the error 
just as much as the human causes it. 
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Remember, I am working from the UX perspective. Our tools for programming, and often our design tools, make it 
far too easy to make mistakes. 
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I want to identify the usability problems that are specific to beginners. How do I determine what's hard for them? 

I needed a language for what’s going on mentally when someone is using Mono and Unity. So I went back to the 
library. Here's one way to do it: 
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Step 1: Recall that the first command is called "cut" 

Step 2: Recall that the command "cut" is in the right click menu 
Step 3: Locate the icon of the source file on the screen 
Step 4: Accomplish the goal of selecting and executing the "cut" command 
Step 5: Recall that the next command is called "paste" 

Step 6: Recall that the command "paste" is in the right click menu 
Step 7: Locate the icon of the destination folder on the screen 
Step 8: Double click with left mouse button 
Step 9: Locate empty spot on screen 
Step 10: Move mouse to the empty spot 

Step 11: Accomplish the goal of selecting and executing the "paste" comma 
Step 12: Return with goal accomplished 

This is a breakdown of cutting and pasting a file in Windows. Did you know there are twelve steps? I didn't Once 
you learn it you forget it. 

So what are some small, atomic tasks in Unity? Let’s say I ask you to add a collider to a game object in Unity. For 
me and you, it's like cut and paste. 
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Step 1: Locate the target GameObject. 

Step la: Locate the Scene view in the Unity interface. 

Step lb: Navigate within the scene view using pan and zoom until the target 
GameObject is visible on screen. 

Step lc: Click to select the target GameObject. 

Step Id: Observe that the Inspector now shows information about the selected 
GameObject. 

Step 2: Recall that colliders are components. 

Step 3: Navigate to bottom of Inspector view. 

Step 4: Click ‘Add Component' button. 

Step 5: Recall that Unity considers collider components part of the physics system 
Step 6: Choose ‘Physics’ submenu. 

Step 7: Locate the desired shape from the 15 available options under Physics. 

Step 8: Click on the desired collider type. 

But - well, when I broke this down I was surprised. I was able to remember some of what it’s like to do this the 
first time. But remember, this is only one small step of a larger process 
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Make a GameObject respond to collisions 


Step 1: Add a collider to a game object in Unity with appropriate 
settings. 

Step 2: Add a collider to another game object in Unity with 
appropriate settings. 

Step 3: Add a Rigidbody component to one or both of the objects. 
Step 4: Attach a script to one of the game objects. 

Step 5: Open the script. 

Step 6: Enter (or locate and paste) Unity’s specific method name 
and signature for the collision event you’re listening for. 

Step 7: Add the code that will be executed when that collision event 
occurs. 

where this is the larger schema. And then each of these has its own set of steps 
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And they are themselves part of a larger task like “respond to player death”... it goes on, as deep as you like. 
So how to help students situate themselves in this process? 
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It struck me that a lot of those steps started with words like “Recall”. I remember struggling with losing my mental 
place a lot when programming, although I didn’t with other subjects. Aha! A hook! 
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Okay, so particularly with 3D environments like Unity or Maya, you have a huge amount of information on the 
screen. 


You have to sort out what's important, remember the location of buttons and so forth while also maintaining your 
mental stack of tasks and schemas and so on. It’s a delicate dance of mental focus and it can break down in a 
number of ways. Here’s a quick list of five from Claudia Roda. 
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Habituation errors are auto-pilot mistakes. 


Task resumption means re-establishing mental 
context when you return to an interrupted task. 
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We usually mean habituation errors when we say we weren't paying attention. 

Task resumption is hard for everyone - you’ve read (and perhaps written) programmer rants about being 
interrupted. It can only be harder for beginners. 

So these two are less important. 
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Prospective memory allows you to remember that 
you need to do something. 

Retrospective memory allows you to remember 
facts and concepts necessary to your task. 
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These are frequent sources of problems for beginners. For one, they haven’t yet built the short-term memory 
skills. Perhaps more importantly they haven’tyet built up the higher-level chunks that experts use to recognize 
problems and maintain a sense of what they are doing. 
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Primary task disruption is what we usually ca 
distraction or being sidetracked. 
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This includes things like alert dialogs, but for beginners the main source of this is bugs and particularly compiler 
errors. You have to shove back your whole stack and fix the bug before you can continue. Perhaps 
understandably, beginners often try fixing problems with very small changes, basically hoping to make the 
disruption go away. They already feel sidetracked and they feel like they need to keep getting results. 


For this reason, debugging is considered the hardest skill to acquire for beginners. Lastly we have 
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Missing important information comes from 
incorrectly prioritizing information that is available 
to you. 
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This is particularly tough for beginners. There's all that stuff on the screen, in both Unity and Mono. So many 
buttons and menus! You only learn to prioritize what you’re seeing when you’ve already built up a sense of the 
tool and a strong mental model of whatyou're doing. 


So, how can our tools help with this? I’ll mostly focus on Unity here, with just a brief look at mobile and web tools. 
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Tools: Unity 
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Not for Beginners 

• Haste Pro, where you 
need to know what 
you’re looking for 

• PlayMaker, where you 
are avoiding scripting 
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ProBuilder, which 
certainly makes 
Unity easier to use 
but does not make 
its guts more legible 


I 



So these are anti-patterns. A lot of people have tried to improve the Unity editor. These are great tools, but they do 
not particularly help beginners. 
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Unity Tools 


Inspector Navigator 
Editor Console Pro 
Script Inspector 3 
Full Inspector 
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These are the four that I’ve found that most directly address the problems beginners have. 
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Inspector Navigator 

Adds back/forward 
and breadcrumbs to 
the Inspector pane. 

Optionally focuses 
scene camera on 
selected item. 
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Quad Area tight 'Zeri 

9 + 

O Inspector 


■ w S 

^ Zerg 

Tag Untagqed 

% Layer Default 

Static ▼ 

Prefab Select 

Revert 

Apply 

) Transform 


• * 

Position 

X -204.SS Y 1 

Z -10 


i - j 
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Inspector Navigator 

Maintains mental context very effectively, with a familiar 
Ul metaphor. 

Helps with: 

• prospective memory 

• primary task disruption 


GDC 
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Editor Console Pro 

Improved console 
window offering 
visual prioritization, 
search and filter 
functions, error 
context and more 
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As mentioned before, debugging happens to be the hardest cognitive task for beginners. The Unity console does 
not help. 
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^ Console 
Clear Collapse 


Clear on Play Error Pause 


Speed: 6.839688, Height:8, Length:100, Number ot Bullets: 
Unity Engine. Debug: Log(Object) 


• 93 A 4 ! o 

6, Name: I am a test script 


Number of Bullets: 6, Name: I am a test script 


Number of Bullets: 6, Name: I am a test script 


Speed: 6.847155, Height:8, Length:100, 

Unity Engine. Debug: Log(Object) 

Speed: 6.855266, Height:8, Length:100, 

Unity Engine. Debug: Log(Object) 

Speed: 6.862822, Height:8, Length:100, Number of Bullets: 6, Name: I am a test script 
Unity Engine. Debug: Log(Object) 

Speed: 6.870385, Height: 8 , Length:100, Number of Bullets: 6, Name: I am a test script 
Unity Engine. Debug: Log(Object) 

Speed: 6.878559, Height:8, Length:100, Number of Bullets: 6, Name: I am a test script 
UnityEngine.Debug:Log( Object) 

Speed: 6.974715, Height: 8 , Length:100, Number of Bullets: 6, Name: I am a test script 
UnityEngine.Debug:Log( Object) 

Speed: 7.008584, Height:8, Length:100, Number of Bullets: 6, Name: I am a test script 
Unity Engine. Debug: Log(Object) 


Speed: 7.016969, Height:8, Length:100, 
Unity Engine. Debug: Log(Object) 

Speed: 7.024756, Height:8, Length:100, 
Unity Engine. Debug: Log(Object) 

Speed: 7.032861, Height:8, Length:100, 
Unity Engine. Debug: Log(Object) 


Number of Bullets: 6, Name: I am a test script 


Number of Bullets: 6, Name: I am a test script 


Number of Bullets: 6, Name: I am a test scri pt 


This is the usual console display. All the information has the same visual weight. You find whatever you’re looking 
for by scrolling through. You can't sort it, search it or export it It’s absolutely terrible! 
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Now we have visual guidance with the use of color, and particularly letting you customize what you are looking at 
through search and filter. 
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Editor Console Pro 

Allows user to customize display to show what they 
want to focus on. Guides attention with color. 

Helps with: 

• primary task disruption 

• prospective and retrospective memory 
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These features make debugging less painful, less distracting and more effective. 
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Script Inspector 3 

In-editor IDE 

Mature feature set 
(supports code 
regions, has auto- 
complete, highlights 
syntax errors, more) 


GDC 
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Script Inspector 3 is another great tool. Let's take a quick look at the problem it’s solving. 
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So this is the user experience for writing code in the Unity world. [Flip back and forth rapidly between this and the 
next slide.] You are constantly flipping back and forth between Mono (or VS) and the Unity editor. Try to keep an 
eye on the properties of the rigidbody while I do this. Can you? 

It’s hard to keep your focus in one place when you’re constantly retraining your eyes. You get better at it with 
practice, but when you’re first using Unity this is really disruptive. 
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What if you could edit your code in the same visual context as your game objects? 
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Script Inspector 3 

Significantly improves directness of connection between 
action and result. Does not disrupt mental context. 

Helps with: primary task disruption, prospective 
memory, missing important information 


If you can edit your scripts in the same visual environment as your game object, you can maintain your sense of 
place and task. You get a much shorter feedback cycle as well, so you can learn the connections between your 
coding choices and their effects in the game. 

This approach also rewards making small changes and testing them immediately, which experienced 
programmers do but beginners pretty consistently do not 



iLlllim. 
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Full Inspector 

Exposes advanced 
data structures. 

Lets user edit the 
properties of 
referenced scripts in 
place in the Inspector 
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Ammunition Type i 
Iqu^ibriuri IS 

Kitten Appreciaton 
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- 
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Full Inspector is more for intermediate students. It is tremendously helpful for explaining code structures like 
dictionaries and delegates. 
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▼ B Weapons Database (Script) 

Script 3| WeaponsDatabase 

Abilities (element 4 of 4) 

<5 wap << 

▼ Name GentlyDragAwayFromlnternet 

Image Hi None (Texture) 

▼ Activation Requirements 

+ 

Event Filter Someone Is Wrong On The Internet 

— 

Event Filter Chose To Read Comments 


▼ Effects 

+ 

SI Jfvn jnqet free \ 

Ammunition Type loving 

~ r 

Equilibrium IS 


Kitten Appreciation 0 


Strength 0 


Compassion 0 



It allows you to see the cause and effect of script interactions by letting you define them in a visual editor. 

Here, for example, you can specify events that will trigger effects. Letting the student see that multiple events can 
trigger the same effect and vice versa gives them a good, concrete hook for understanding the idea of loose 
coupling. 
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Full Inspector 

Allows user to inspect 
and update statics while 
the game is running 
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Sijtk Inspector 
Static Inspector 

Inspected Type 



r..ime$tnte 


* None (Audio Source) 
None (ItvHLoidtr) 


14 10 . 701 


You can also see and change statics, which are otherwise pretty abstract and mysterious for beginners. 
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This lets them see, with their eyes, that statics are not attached to any specific game object or script instance. 
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Full Inspector 

Creates a visual 
interface for: 

• generics 

• interfaces 

• dictionaries, structs 

• properties 

• delegates 


GDC 
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More abstract things like generics and interfaces also become much clearer with a concrete, visual editor. 
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Q Dictionary Demo Behavior (Script) 

StnngGameObject 

« * 

This is my key 

SomeObject 

o - 

Another Reference 

C None (GameObject) 

G - 

+ The next key 




For example, you could create multiple kinds of dictionaries to let the students see how one data structure can 
represent relationships between many combinations of types. 
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Full Inspector 


Greatly enhances directness and preserves context 
when working with more complicated code structures. 

Helps with: the notional machine, primary task 
disruption, prospective memory, retrospective memory 
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On the Horizon/Honorable Mention 


Relationslnspector 
Methodic 
ProG roups 
ReView 
Squiggle 


TypeSafe 
U2DEX 
ulntellisense 
Advanced Select 



I 



These are some other tools that I think could be adapted to be useful, or that are helpful but not revolutionary for 
beginners. 
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Tools: Mobile and Web 
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Let’s take a quick look at how these principles would apply outside the world of Unity. 
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Mobile and Web Tools 


Dev Tools 
Intel XDK 

CodePen, C9.io, Monaca 
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A couple of primary problems with mobile development are 

(1) understanding the development and deployment process with an extra device, store submissions and so on, 
and 

(2) the gap between working on your code on one device and viewing it on another, where you don't have all your 
tools. 


These are tools I think help to keep students oriented to what they’re doing. We’ve already talked about dev tools. 
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XDK 


Reskinning of Atom editor, with tabs laying 
out the mobile development process 


GDC 
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My favorite currently is a tool developed by Intel called XDK. It’s a set of tools for building hybrid mobile apps, 
including a reskinning of the Atom editor, integrated cloud builds, and a pretty solid emulator among others. 
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This is the “develop” view, where you manage files and write code. 
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The tabs at the top lay out all the steps of mobile development, including the cloud builds there at the end. It’s 
pretty much everything but store submission. 


XDK is free, and Intel is actively developing it. 


GDC 20 1 6 - Teaching Designers to Code - Margaret Moser 


GDC EDUCATION 





Monaca 


Cloud-based editor with instant update 
on phone. On-device collaboration tools 
like editable screen shots. 


GDC 



Monaca is a commercial service that provides a similar toolset. The main difference is the cloud-based code 
editor, allowing real-time collaboration. 


I doubt anyone really likes writing code in a web browser, but they’ve done some work to make it less painful. 
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The tool also provides a live connection to the devices for debugging (via weinre). 
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Conclusions 
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Remember, our students are doing all of this at once! 

1. General orientation 

2. The notional machine 

3 . Notation 

4 . Plans and schemas 


5 . Pragmatics 


Source: Benedict du Boulay, 
Some Difficulties of Learning to Program 
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And in the process we are asking them to stretch 
their attention and short-term memory to levels they 
usually haven’t gone to before. 
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We can make it easier for them by finding tools that 
address the specific cognitive issues they are facing. 


GDC 
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And we owe it to them to try! 
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I wantto thank the makers of the Unity packages, USC Games and my students for helping me build this 
presentation. 
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Thank you! 

@cormorancy 

mmoser@cinema.usc.edu 
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And thank you for listening! I look forward to hearing your thoughts in the wrap-up area. 
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